<template>
  <a-tabs v-model:activeKey="tabActiveKey">
    <template #renderTabBar="{ DefaultTabBar }">
      <!-- 隐藏默认的 tabBar -->
    </template>
    <a-tab-pane key="generate_list" tab="列表">
      <GenerateList @changeTab="onChangeTab" />
    </a-tab-pane>
    <a-tab-pane key="generate_config_list" tab="配置">
      <ConfigList @changeTab="onChangeTab" />
    </a-tab-pane>
  </a-tabs>

  <!-- 方法添加表单 -->
  <GenerateAdd ref="addRef" @dataReload="getTableData" />
</template>
<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import GenerateList from './generate_list.vue';
  import ConfigList from '@/views/tools/generate/generate_config_list.vue';
  import GenerateAdd from '@/views/tools/generate/generate_add.vue';

  import { bizApi } from '@/api/biz';
  import { message, Modal } from 'ant-design-vue';
  import { type CustomTableColumnType } from '@/types/table'; //扩展 TableColumnType 定义

  const tabActiveKey = ref<'generate_list' | 'generate_config_list'>('generate_list');
  function onChangeTab(key: (typeof tabActiveKey)['value']) {
    tabActiveKey.value = key;
  }
  /* [显示弹窗] 1.调用子组件显示添加窗体 */
  const onAdd = () => {
    addRef.value?.show(); //调用子组件 显式弹窗方法
  };
  const addRef = ref<typeof GenerateAdd | null>(null); //角色添加模态弹窗组件引用，用与调用模态弹窗组件内部方法

  /* [显示弹窗] 1.接收传入的ID,2.调用子组件显示修改窗体 */
  const onConfig = (id: number) => {
    editRef.value?.show(id); //调用子组件 显示 弹窗方法
  };
  const editRef = ref<typeof ConfigSet | null>(null); //数据表配置 模态弹窗组件引用，用与调用模态弹窗组件内部方法

  /* [生成接口] */
  const onGenerateApi = async (id: number) => {
    Modal.confirm({
      // 先显示确认弹窗
      title: '确认生成实体',
      content: '确定要生成该表的实体类吗？此操作将根据表结构生成对应的实体代码。',
      okText: '确认',
      cancelText: '取消',
      onOk: async () => {
        // 用户点击确认按钮时执行
        const action = 'base.manage.tableconfig.ServiceImpl.generateClass';
        const params = { table_config_id: id };
        try {
          const result = await bizApi.httpSave(action, params);
          message.success({ content: result?.sub_message || '接口类生成成功' });
          getTableData(); // 重新获取表格数据
        } catch (error: any) {
          message.error(error?.message || '接口类生成失败');
        }
      },
      onCancel: () => {
        message.info('已取消生成操作');
      }, // 用户点击取消按钮时执行
    });
  };

  /* [获取表格数据] 1.调用 table-template 组件的 getTableData 方法 获取数据 2.处理数据 3.赋值 */
  const getTableData = async () => {
    await tableRef.value?.getTableData(listAction, listParams, true);
  };
  const tableRef = ref<typeof TableTreeTemplate | null>(null);
  const listAction = 'base.manage.modulegenerate.ServiceImpl.list'; //list接口 方法
  const listParams = { module_type: 2, module_level_type: 3 }; //list接口 参数 2:取得总后台模块,3:取得所有级别模块

  onMounted(() => {
    getTableData();
  }); //组件加载完成时，获取表格数据

  /* [按钮配置] */
  const toolbarConfig = [
    {
      text: '创建模块',
      type: 'primary',
      icon: 'add' as const,
      permission: 'generate_add',
      onClick: onAdd,
    },
  ];
  /* [表格配置] */
  const columns: CustomTableColumnType<any>[] = [
    {
      title: '模块名',
      fixed: 'left',
      dataIndex: 'module_name',
      width: 180,
    },
    {
      title: '组件路径',
      dataIndex: 'generate_component_path',
      width: 180,
    },
    {
      title: '生成类型',
      dataIndex: 'generate_type',
      options: { 1: '数据表驱动', 2: '表单驱动' },
    },
    {
      title: '是否添加到菜单',
      dataIndex: 'add_menu_status',
      options: { 1: '已添加到菜单', 2: '未添加到菜单' },
    },
    {
      title: '关联菜单',
      dataIndex: 'module_path_name',
      width: 180,
    },
    {
      title: '排序',
      dataIndex: 'sort',
      width: 30,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      width: 250,
    },
    {
      title: '操作',
      dataIndex: 'action',
      buttons: [
        {
          children: () => '关联菜单',
          type: 'link',
          onClick: (record) => onAddMenu(record.table_config_id),
        },
        {
          children: () => '配置',
          type: 'link',
          onClick: (record) => onConfig(record.table_config_id),
        },
        {
          children: () => '生成JAVA',
          type: 'link',
          onClick: (record) => onGenerateJava(record.table_config_id),
        },
        {
          children: () => '生成VUE',
          type: 'link',
          onClick: (record) => onGenerateVue(record.table_config_id),
        },
      ],
    },
  ];
</script>
<style lang="less" scoped></style>
